<template>
  <van-nav-bar left-arrow @click-left="back" />
  <div class="login_main">
    <h1>验证码登录</h1>
    <p>未注册的手机号验证通过后将自动注册账号</p>
    <van-field v-model="phone" label="+86" placeholder="手机号" required />
    <van-cell-group inset>
      <van-field v-model="code" center clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button
            size="small"
            type="primary"
            plain
            @click="sendCode"
            :disabled="downTime != 61"
            >{{ downTime == 61 ? "发送验证码" : downTime + "s" }}</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <van-button
      type="warning"
      round
      block
      style="margin: 10px 0; color: #fff"
      @click="login"
      >立即登入</van-button
    >
    <div class="pupop_icon">
      <van-icon name="chat-o" color="green" size="24px" />
      <van-icon name="notes-o" size="24px" @click="router.push('/passwordlogin')" />
    </div>
    <div class="pupop_agreement">
      <van-checkbox name="a" shape="square" v-model="flag">
        我已阅读并同意
        <span class="orange">《用户协议》《隐私政策》</span>，
      </van-checkbox>
    </div>
  </div>
  <!-- 圆角弹窗（底部） -->
  <van-popup
    v-model:show="showBottom"
    round
    position="bottom"
    :style="{ height: '45%' }"
  >
    <div class="popup_top">
      <van-icon name="cross" size="22" @click="onClickLeft" />
      <p>登入发现更多精彩</p>
    </div>
    <div class="popup_phone">
      <h2>{{ phone.slice(0, 3) + "****" + phone.slice(7, 11) }}</h2>
      <p>中国{{ type }}提供认证服务</p>
    </div>
    <van-button
      type="warning"
      round
      block
      style="width: 80%; margin: 0px auto; color: #fff"
      @click="login(true)"
      >本机号码一键登入</van-button
    >
    <div class="pupop_icon">
      <van-icon name="chat-o" color="green" size="24px" />
      <van-icon name="envelop-o" color="green" size="24px" />
      <van-icon name="notes-o" color="green" size="24px" />
    </div>
    <div class="agreement">
      <van-checkbox name="a" shape="square" v-model="flag">
        使用手机号登陆并同意，
        <span class="orange">《中国{{ type }}认证服务条款》</span>，
        <span class="orange">《用户协议》</span>和
        <span class="orange">《隐私政策》</span>
      </van-checkbox>
    </div>
  </van-popup>
</template>
  
  <script setup>
import { onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import countdown from "../../components/countdown";
import testPhone from "../../components/testPhone";
import { loginAPI, sendCodeAPI } from "../../request";
const router = useRouter();
const flag = ref(false);
const phone = ref("");
const code = ref("");
const rightCode = ref("");
const showBottom = ref(true);
const downTime = ref(61);
const type = ref("移动");
const onClickLeft = () => {
  showBottom.value = false;
  phone.value = "";
};
const back = () => {
  router.back();
};
const login = async (isFlag) => {
  if (!flag.value) {
    showFailToast("请先勾选协议");
    return;
  }
  if (!isFlag) {
    if (phone.value == "") {
      showFailToast("手机号错误");
      return;
    }
    if (
      code.value == "" ||
      rightCode.value == "" ||
      rightCode.value != code.value
    ) {
      showFailToast("验证码错误");
      return;
    }
  }
  let { data } = await loginAPI({ phone: phone.value });
  if (data.code == 200) {
    localStorage.setItem('userInfo',JSON.stringify(data.data))
    localStorage.setItem("token", data.token);
    localStorage.setItem("lastLogin", phone.value);
    router.push("/cdn");
  }
};
const sendCode = async () => {
  if (!testPhone(phone.value)) return;
  countdown(downTime, downTime.value);
  let { data } = await sendCodeAPI({ phone: phone.value });
  rightCode.value = data.data;
  showSuccessToast(data.msg || "发送成功");
};
onBeforeMount(() => {
  let lastLogin = localStorage.getItem("lastLogin");
  if (!lastLogin) {
    showBottom.value = false;
  } else {
    phone.value = lastLogin;
    if (
      /^(13[4-9]|147|15[0-2,7-9]|172|178|18[2-4,7-8]|198)\d{8}$/.test(
        phone.value
      )
    ) {
      type.value = "移动";
    } else if (
      /^(13[0-2]|15[5-6]|166|17[1,5-6]|18[5-6])\d{8}$/.test(phone.value)
    ) {
      type.value = "联通";
    } else if (/^(133|153|17[3-4,7]|18[0-1,9]|199)\d{8}$/.test(phone.value)) {
      type.value = "电信";
    }
  }
});
</script>

  
<style scoped lang='less'>
.login_main {
  padding: 10px 30px;
  box-sizing: border-box;
  P {
    font-size: 14px;
  }
  .pupop_icon {
    position: fixed;
    bottom: 15%;
  }
  .pupop_agreement {
    position: fixed;
    bottom: 7%;
  }
  .van-field {
    margin: 10px 0;
    border: 1px solid #fc694f;
    border-radius: 1.5em;
    box-shadow: 0 10px 2px #eee;
  }
  > .van-button {
    border: 1px solid #fc694f;
    border-radius: 1.5em;
    box-shadow: 0 10px 15px #999;
  }
  .van-cell-group {
    margin: 0;
  }
}
.orange {
  color: #fc694f;
}
.agreement {
  width: 80%;
  margin: 0 auto;
}
.pupop_icon {
  width: 80%;
  margin: 15px auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.popup_phone {
  width: 100%;
  text-align: center;
  margin: 10px 0;
  h2 {
    letter-spacing: 4px;
  }
  p {
    margin: 10px 0;
  }
}
.popup_top {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  p {
    width: 100;
    margin: 0 auto;
  }
}
</style>